<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--bootstrap-->
    <link href="/shop-app/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/shop-app/js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/shop-app/bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入HttpUtil.js -->
    <script src="/shop-app/js/HttpUtil.js"></script>
    <!-- 界面报icon找不到问题 -->
    <link rel="shortcut icon" href="#"/>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 50px">
            <form class="form-horizontal">
                <div class="alert alert-success text-center" role="alert" style="font-size: 30px">注册</div>
                <div class="form-group">
                    <label  class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-7">
                        <input id="uName" type="text" class="form-control"  placeholder="userName">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-7">
                        <input id="uPassword" name="uPassword" type="password" class="form-control"  placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">确认密码</label>
                    <div class="col-sm-7">
                        <input type="password" class="form-control"  placeholder="Password">
                    </div>
                </div>

                <div class="form-group">
                    <label  class="col-sm-3 control-label">手机</label>
                    <div class="col-sm-7">
                        <input id="uPhone" type="text" class="form-control"  placeholder="Phone">
                    </div>
                </div>

                <div class="form-group">
                    <label  class="col-sm-3 control-label">Email</label>
                    <div class="col-sm-7">
                        <input id="uEmail" type="email" class="form-control"  placeholder="Email">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">性别</label>
                    <div class="col-sm-7" style="width: 40%">
                        <label class="radio-inline">
                            <input type="radio" name="uSex" value="男"> 男
                        </label>
                        <label class="radio-inline">
                        <input type="radio" name="uSex" value="女"> 女
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-8 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> 先留着
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1  col-sm-12">
                        <button onclick="submitRegister()" type="button" class="btn btn-default btn btn-success" style="width: 120px" >注册</button>
                        <button type="reset" class="btn btn-default col-sm-offset-3 btn btn-warning" style="width: 120px">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 注册内容结束 -->
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" id="modalButton" data-toggle="modal" data-target="#myModal" style="display: none">
    开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    友好提示
                </h4>
            </div>
            <div class="modal-body">
                我们向您发送了一封邮件，请去激活
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button onclick="verifyActive()" disabled="disabled" id="disabledBtn" type="button" class="btn btn-primary">
                    确认激活
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    function submitRegister() {
        console.log("11");
        //ajax 请求后台注册用户
        let url = "/user/register";
        let params = {
            uName: $("#uName").val(),
            uPassword: $("#uPassword").val(),
            uPhone: $("#uPhone").val(),
            uEmail: $("#uEmail").val(),
            uSex: $('input:radio:checked').val()
        };
        $('#modalButton').trigger('click');
        httpPostApi(url, params, function (data) {
            //请求注册成功转跳到提示邮箱
            console.log(data);
            if (data != null) {
                $("#disabledBtn").attr('disabled',false);
            }
        });
    }
    //确认激活跳到登录界面
    function verifyActive() {
        // location.href = appendHost("/user/user-sign-in.html");
        location.href = "/shop-app/user/user-sign-in.html";
    }
</script>
</body>
</html>